<template>
    <div id="wrap" style="display: flex;">
        <el-text class="title-text" size="large">图书管理系统</el-text>
        <div class="align-left" style="margin-left: auto;">
            <el-button @click="logOut">Log out</el-button>
        </div>
    </div>
</template>  

<script setup>
import { getCurrentInstance } from 'vue';
import { useMainStore } from '../store/index.js';
const instance = getCurrentInstance()
const store = useMainStore()


defineProps(['user'])

const logOut = () => {
    // 清除用户资料
    store.userName = ''
    store.isAdmin = false
    store.isLogin = false
    store.token = ''
    // 跳转到登录页面
    instance.proxy.$router.push('/login')
}
</script>
  
<style lang="scss" scoped>
#wrap {
    height: 80px;
    line-height: 80px;
    display: flex;
    width: 100vw;
    min-width: 500px;
    padding: 0 20px;

    font-size: 20px;

    border-color: #dddfe5;
    background: linear-gradient(to top right, rgb(55, 55, 55), rgba(86, 86, 86, 0.872));

    .title-text {
        font-size: 25px;
        font-weight: 900;
        color: #f0f0f0;
    }

    .item-left {
        justify-content: right;
    }
}
</style>